/* 内河涌 弹框 桩端信息页 
 * @ 劳兆城 
 * @ 2017-07-20*/
<template>
	<div class="water-pile clear">
		<div class="water-pile-table pull-left">
			<div class="table">
				<Table 
					@on-row-click="rowClick" 
					:columns="table.thead" 
					:data="table.tbody" 
					size="small" 
					highlight-row 
					border></Table>				
			</div>
			<div class="page">
				<Page 
					:total="table.total" 
					@on-change="pageChange" 
					size="small" 
					show-total></Page>				
			</div>
		</div>
		<div class="water-pile-info pull-right">
			<div class="pile-row">
				<div class="pile-title">桩号段</div>
				<div class="pile-content">
					<Input v-model="water.segcode" size="small" placeholder="请输入"></Input>
				</div>
			</div>
			<div class="pile-row">
				<div class="pile-title">桩号段名</div>
				<div class="pile-content">
					<Input v-model="water.segname" size="small" placeholder="请输入"></Input>
				</div>
			</div>
			<div class="pile-row">
				<div class="pile-title">河面底宽(m)</div>
				<div class="pile-content">
					<Input v-model="water.btmwidth" size="small" placeholder="请输入"></Input>
				</div>
			</div>
			<div class="pile-row">
				<div class="pile-title">河面断面宽(m)</div>
				<div class="pile-content">
					<Input v-model="water.brokenwidth" size="small" placeholder="请输入"></Input>
				</div>
			</div>
			<div class="pile-row">
				<div class="pile-title">系统排序号</div>
				<div class="pile-content">
					<Input v-model="water.segorder" size="small" placeholder="请输入"></Input>
				</div>
			</div>
			<div class="pile-row">
				<div class="pile-title">左岸堤顶路情况</div>
				<div class="pile-content">
					<Input v-model="water.lfttop" size="small" placeholder="请输入"></Input>
				</div>
			</div>
			<div class="pile-row">
				<div class="pile-title">左岸线,岸坡</div>
				<div class="pile-content">
					<Input v-model="water.lftedge" size="small" placeholder="请输入"></Input>
				</div>
			</div>
			<div class="pile-row">
				<div class="pile-title">左岸堤后地形地貌</div>
				<div class="pile-content">
					<Input v-model="water.lftbake" size="small" placeholder="请输入"></Input>
				</div>
			</div>
			<div class="pile-row">
				<div class="pile-title">右岸堤顶路情况</div>
				<div class="pile-content">
					<Input v-model="water.rghtop" size="small" placeholder="请输入"></Input>
				</div>
			</div>
			<div class="pile-row">
				<div class="pile-title">右岸线,岸坡</div>
				<div class="pile-content">
					<Input v-model="water.rghedge" size="small" placeholder="请输入"></Input>
				</div>
			</div>
			<div class="pile-row">
				<div class="pile-title">右岸堤后地形地貌</div>
				<div class="pile-content">
					<Input v-model="water.rghbake" size="small" placeholder="请输入"></Input>
				</div>
			</div>
			<div class="pile-buttons clear">
				<Button 
					@click.native="_saveClick" 
					:disabled="!canSave" 
					class="pull-right" 
					type="primary" 
					style="margin-left: 10px;">保存</Button>
				<Button 
					@click.native="_addClick" 
					class="pull-right" 
					type="success">新增</Button>
			</div>
		</div>
	</div>
</template>

<script>
	import { singleWaterNetPile } from 'common/js/table'
import { successNotice, errorNotice } from 'common/js/dom'
import { ERR_OK } from 'api/config'
import { getWaterPile, addWaterPile, editWaterPile, delWaterPile } from 'api/aPicture'

export default {
		data () {
			return {
				water: {},
				table: {
					thead: singleWaterNetPile(this),
					tbody: [],
					total: null
				}
			}
		},
		computed: {
			canSave () {
				return JSON.stringify(this.water) !== '{}'
		}
		},
		created () {
			this.page = 1
	
		this._getWaterPile()
	},
		methods: {
			rowClick (row) {
				this.water = row
		},
			pageChange (page) {
				this._getWaterPile(page)
			this.page = page
		},
			_saveClick () {
				editWaterPile(this.water).then(res => {
					if (res.code === ERR_OK) {
						this._getWaterPile(this.page)
					successNotice('保存成功')
				} else {
						errorNotice('保存失败')
				}
				})
			},
			_addClick () {
				addWaterPile().then(res => {
					if (res.code === ERR_OK) {
						this._getWaterPile(this.page)
					successNotice('新增成功')
				} else {
						errorNotice('新增失败')
				}
				})
			},
			_delClick (row) {
				delWaterPile(row.strivsegid).then(res => {
					if (res.code === ERR_OK) {
						this._getWaterPile(this.page)
					this.water = {}
					successNotice('删除成功')
				} else {
						errorNotice('删除失败')
				}
				})
			},
			_getWaterPile (page) {
				getWaterPile(page).then(res => {
					if (res.code === ERR_OK) {
						this.table.tbody = res.result.result
					this.table.total = res.result.totalSize
				}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.singleWaterNet-model {
		.water-pile {
			width: 100%;
			height: 100%;
			padding: 0 5px;
			.water-pile-table {
				width: calc(60% - 10px);
				height: 100%;
				position: relative;
				margin-right: 10px;
				.table {
					width: 100%;
					position: absolute;
					top: 15px;
					left: 0;
				}
				.page {
					position: absolute;
					bottom: 5px;
					right: 5px;
				}
			}
			.water-pile-info {
				width: 40%;
				height: 100%;
				padding-top: 15px;
				padding-right: 10px;
				.pile-row {
					display: flex;
					align-items:center;
					margin: 5px 0;
					.pile-title {
						width: 60px;
						font-size: 12px;
						text-align: right;
						padding-right: 5px;
						margin-top: 2px;
					}
					.pile-content {
						flex: 1;
					}
				}
			}
		}
	}
</style>